<!-- 意见反馈 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="意见反馈" />
    <view class="type">
      <view class="type__name">反馈类型</view>
      <view class="type__value" @click="openType()">
        {{ isEmpty(feedbackType) ? '请选择' : feedbackType }}
        <text class="iconfont icon-youjiantou" style="font-size: 14px" />
      </view>
    </view>
    <view class="content">
      <textarea
        v-model="params.content"
        :maxlength="500"
        placeholder="您填写的信息越全，问题越可有效解决呦~"
        style="height: 200px"
      ></textarea>
      <view>
        <uni-file-picker
          v-model="imageValue"
          :limit="3"
          file-mediatype="image"
          mode="grid"
          :auto-upload="true"
          @select="selectImage"
          @delete="deleteImage"
        />
      </view>
    </view>

    <view class="contact">
      <input v-model="params.contact" placeholder="联系方式：手机号/邮箱（选填）" />
    </view>

    <view class="btn">
      <button @click="beforeSubmit()">提交</button>
    </view>

    <aster-popup :show="showPopup" bgColor="#fff" mode="bottom" round="20rpx" @close="closePopup()">
      <view class="popup">
        <uni-list>
          <uni-list-item
            v-for="(item, index) in list"
            :key="index"
            :title="item.name"
            clickable
            @click="selectType(item)"
          />
        </uni-list>
      </view>
    </aster-popup>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterPopup from '@/components/common/aster-popup.vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import { getFeedbackType, saveFeedbackType } from '@/services/api/setting/feedback';
  import { BaseModel } from '@/services/model/baseModel';
  import { FileModel, FilePickerModel } from '@/services/model/fileModel';
  import config from '@/utils/config';
  import { uploadImages } from '@/utils/fileUtils';
  import { isEmpty } from '@/utils/is';
  import { router } from '@/utils/router';
  import { Toast } from '@/utils/uniapi/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { onBeforeUnmount, reactive, ref } from 'vue';

  const showPopup = ref(false);
  /** 反馈类型集合 */
  const list = ref<Array<BaseModel>>([]);
  /** 反馈类型 */
  const feedbackType = ref('');
  /** 回显图片 */
  const imageValue = ref<Array<FileModel>>([]);
  /** 待提交文件 */
  const files = ref<Array<FileModel>>([]);

  /** 待提交参数 */
  const params = reactive({
    type: '',
    content: '',
    contact: '',
    files: null,
  });

  const timer = ref();

  /** 打开弹窗 */
  const openType = () => {
    showPopup.value = true;
  };

  /** 关闭弹窗 */
  const closePopup = () => {
    showPopup.value = false;
  };

  /** 点击类型 */
  const selectType = (type: BaseModel) => {
    feedbackType.value = type.name;
    params.type = type.value;
    showPopup.value = false;
  };

  /**
   * 选择
   * @param e 文件
   */
  const selectImage = (e: FilePickerModel) => {
    console.log('----------select---------');
    const tempFiles = e.tempFiles ? e.tempFiles : [];
    for (let i = 0; i < tempFiles.length; i++) {
      files.value.push(tempFiles[i]);
    }
  };

  /**
   * 删除
   * @param e 文件
   */
  const deleteImage = (e: FilePickerModel) => {
    console.log('----------delete---------');
    files.value = files.value.filter((item) => {
      return item.uuid != e.tempFile?.uuid;
    });
  };

  /**
   * 校验表单
   */
  const validateForm = () => {
    if (isEmpty(params.type)) {
      Toast('请选择反馈类型');
      return false;
    }
    if (isEmpty(params.content)) {
      Toast('请填写反馈内容');
      return false;
    }
    return true;
  };

  /**
   * 提交
   */
  const beforeSubmit = () => {
    const validate = validateForm();
    if (!validate) return;

    if (files.value != null && files.value.length > 0) {
      const uploadFiles = files.value.map((item: FileModel) => {
        return {
          name: item.name,
          file: item.file,
          uri: item.url,
        };
      });
      // 上传图片
      uploadImages(uploadFiles, submit);
    } else {
      submit('');
    }
  };

  /**
   * 提交反馈
   * @param file 图片
   */
  const submit = (file: any) => {
    params.files = file;
    saveFeedbackType(params).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        Toast('提交成功！');
        timer.value = setTimeout(() => {
          router.pushTab(config.route.my);
        }, 1500);
      }
    });
  };

  /** 获取数据 */
  const loadData = (callback: Function) => {
    getFeedbackType().then(({ data }) => {
      console.log('======反馈类型======');
      list.value = data.data;
      callback();
    });
  };

  onLoad(() => {
    // 加载数据
    loadData(() => {});
  });

  /** 页面销毁前清除定时器 */
  onBeforeUnmount(() => {
    clearInterval(timer.value);
  });
</script>
<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .type {
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    margin: 20rpx 0;

    &__name {
      display: flex;
      align-items: center;
      font-weight: bold;
    }
  }

  .content {
    background: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    margin: 20rpx 0;
  }

  .contact {
    background: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    margin: 20rpx 0;
  }

  .btn {
    border-radius: 20rpx;

    button {
      background-color: #ff6a6c;
      color: #fff;
      font-size: 32rpx;
    }
  }

  .popup {
    padding: 20rpx;
  }
</style>
